{layout name='./base'}
	<form action="javaScript:;" method="post">
		<div style="padding-top: 25px;">
	    </div>
	    <div class="weui-tab__panel">
	    	<div class="weui-cell weui-cell_vcode">
		        <div class="weui-cell__hd">
		            <label class="weui-label">图片名称</label>
		        </div>
		        <div class="weui-cell__bd">
		            <input class="weui-input" type="text" name="title" placeholder="请输入图片名称">
		        </div>
		    </div>
	        <div class="weui-cells weui-cells_form" id="uploader">
	            <div class="weui-cell">
	                <div class="weui-cell__bd">
	                    <div class="weui-uploader">
	                        <div class="weui-uploader__hd">
	                            <p class="weui-uploader__title">图片上传</p>
	                            <div class="weui-uploader__info"><span id="uploadCount">0</span>/1</div>
	                        </div>
	                        <div class="weui-uploader__bd">
	                            <ul class="weui-uploader__files" id="uploaderFiles"></ul>
	                            <div class="weui-uploader__input-box">
	                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" />
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	    <div class="button-sp-area">
		    <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
		</div>
	</form>
	<script type="text/javascript">
		$('#showTooltips').click(function(){
			var data = $('form').serialize();
			$.ajax({
				type:"post",
				url:"/article/save?a"+Math.random(),
				data:data,
				dataType: "json",
				success: function(data){
					switch (data.code){
					    case 200:
						    weui.toast(data.msg, {
							    duration: 2000,
							    className: 'custom-classname',
							    callback: function(){location.href = '/article/list';}
							});
					        break;
					}
				}
			});
		})
	
	
	
		/* 图片自动上传 */
		var uploadCount = 0, uploadList = [];
		var uploadCountDom = document.getElementById("uploadCount");
		weui.uploader('#uploader', {
		    url: 'https://www.gthead.xin/article/upload',
		    auto: true,
		    type: 'file',
		    fileVal: 'fileVal',
		    compress: {
		        width: 1600,
		        height: 1600,
		        quality: .8
		    },
		    onBeforeQueued: function(files) {
		        if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
		            weui.alert('请上传图片');
		            return false;
		        }
		        if(this.size > 1 * 1024 * 1024){
		            weui.alert('请上传不超过10M的图片');
		            return false;
		        }
		        if (files.length > 1) { // 防止一下子选中过多文件
		            weui.alert('最多只能上传1张图片，请重新选择');
		            return false;
		        }
		        if (uploadCount + 1 > 1) {
		            weui.alert('最多只能上传1张图片');
		            return false;
		        }
		
		        ++uploadCount;
		        uploadCountDom.innerHTML = uploadCount;
		    },
		    onSuccess: function (ret) {
		        $('form').append("<input type='hidden' name='list_view[]' value='"+ret.url+"'>");
		    },
		    onError: function(err){
		        weui.alert('上传失败');
		    }
		});
		
		// 缩略图预览
		document.querySelector('#uploaderFiles').addEventListener('click', function(e){
		    var target = e.target;
		    while(!target.classList.contains('weui-uploader__file') && target){
		        target = target.parentNode;
		    }
		    if(!target) return;
		
		    var url = target.getAttribute('style') || '';
		    var id = target.getAttribute('data-id');
		
		    if(url){
		        url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
		    }
		    var gallery = weui.gallery(url, {
		        className: 'custom-name',
		        onDelete: function(){
		            weui.confirm('确定删除该图片？', function(){
		                --uploadCount;
		                uploadCountDom.innerHTML = uploadCount;
		                for (var i = 0, len = uploadList.length; i < len; ++i) {
		                    var file = uploadList[i];
		                    if(file.id == id){
		                        file.stop();
		                        break;
		                    }
		                }
		                target.remove();
		                gallery.hide();
		            });
		        }
		    });
		});
	</script>
